<template>
  <div class="findbox">
    <!-- 顶部标签栏 -->
    <van-row class="top">
      <van-col><van-icon name="arrow-left" @click="$router.back()" /></van-col>
      <van-col>
        <van-search label="地址" placeholder="请输入搜索关键词"> </van-search>
      </van-col>
      <van-col></van-col>
    </van-row>
    <!-- 下拉菜单 -->
    <van-dropdown-menu>
      <van-dropdown-item  title="区域">
        <van-area title="" :area-list="areaList" />
      </van-dropdown-item>
    </van-dropdown-menu>
    <!-- 商品卡片 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <findItem :roomList="roomList"></findItem>
    </van-list>
  </div>
</template>

<script>
import findItem from "@/components/findItem.vue";
import { getRoom } from "@/API/findRoomList.js";
export default {
  name: "VueHkzfFindroom",
  components: {
    findItem,
  },
  data() {
    return {
      areaList: {
        province_list: {
          110000: "区域",
          120000: "地铁",
        },
        city_list: {
          110100: "北京市",
          120100: "天津市",
        },
        county_list: {
          110101: "东城区",
          110102: "西城区",
          // ....
        },
      },
      loading: false,
      finished: false,
      value1: 0,
      option1: [
        { text: "区域", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
      params: {
        cur_page: 1,
        page_size: 10,
        tot: 200,
      },
      roomList: [],
    };
  },

  mounted() {
    this.getRoom();
  },

  methods: {
    onConfirm() {
      this.$refs.item.toggle();
    },
    async getRoom() {
      const res = await getRoom();
      console.log(res);
      this.roomList = [...this.roomList, ...res.data.body];
    },
    async onLoad() {
      this.params.cur_page++;
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      await this.getRoom();
      // 加载状态结束
      this.loading = false;

      // 数据全部加载完成
      if (this.roomList.length >= this.params.tot) {
        this.finished = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.findbox {
  padding-bottom: 50px;
}
.van-dropdown-menu__title {
  font-size: 17px;
}
.van-search {
  background-color: #58b67f !important;
}
.top {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #58b67f;
}
</style>
